<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
    {
        username: "admin001",
        email: "admin001@qq.com",
        phone: "13512345678",
        createdAt: "2023-01-01 12:00:00",
        status: "正常",
    },
    {
        username: "admin003",
        email: "admin003@qq.com",
        phone: "13512345678",
        createdAt: "2023-01-01 12:00:00",
        status: "正常",
    },
    {
        username: "admin004",
        email: "admin004@qq.com",
        phone: "13512345678",
        createdAt: "2023-01-01 12:00:00",
        status: "冻结",
    }
]);

const modalVisible = ref(false);

const handleAction = (action: string) => {
    if (action === 'add') {
        modalVisible.value = true;
    }
};
</script>

<template>
  <umrp-container bg-color="#f2f2f2" height="100%" padding="16px" :gap="16">
    <umrp-breadcrumb :items="['系统管理', '用户列表']"></umrp-breadcrumb>
    <umrp-card>
      <umrp-table :data="dataList" :action-bar="true" @action="handleAction">
        <template #columns>
          <umrp-table-column title="序号" data-index="id"></umrp-table-column>
          <umrp-table-column title="用户账号" data-index="username"></umrp-table-column>
          <umrp-table-column title="电子邮箱" data-index="email"></umrp-table-column>
          <umrp-table-column title="手机号码" data-index="phone"></umrp-table-column>
          <umrp-table-column title="状态" data-index="status"></umrp-table-column>
          <umrp-table-column title="创建时间" data-index="createdAt"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
            <umrp-popconfirm message="您确认删除么？">
              <umrp-button type="danger">移除</umrp-button>
            </umrp-popconfirm>
          </umrp-space>
        </template>
      </umrp-table>
    </umrp-card>
    <umrp-modal v-model:visible="modalVisible" :width="500">
      <umrp-container padding="24px 0">
        <umrp-form>
          <umrp-form-item label="用户账号">
            <umrp-input></umrp-input>
          </umrp-form-item>
          <umrp-form-item label="电子邮箱">
            <umrp-input></umrp-input>
          </umrp-form-item>
          <umrp-form-item label="手机号码">
            <umrp-input></umrp-input>
          </umrp-form-item>
          <umrp-form-item label="状态">
            <umrp-select>
              <umrp-option value="1">正常</umrp-option>
              <umrp-option value="2">冻结</umrp-option>
            </umrp-select>
          </umrp-form-item>
        </umrp-form>
      </umrp-container>
    </umrp-modal>
  </umrp-container>
</template>